<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="add">
            <p v-if="visible">像风吹像大海，不在回来</p>
            <p v-show="visible">我们的爱</p>
            <button v-on:click="visible=!visible">按钮</button>
            <!-- 
                控制元素隐藏/显示
                v-if  / v-else-if  /v-else
                v-show
                区别 v-if在DOM树中删除，v-show通过display：none;隐藏
                频繁切换v-show性能更好
                短次数切换v-if更好，删的干净，不会影响其他操作
             -->
             <p v-if="visible2">一一一二一</p>
            <p v-else-if="visible2">一二三四五六七</p>
            <p v-else>八九十</p>
            <button v-on:click="visible2=!visible2">按钮</button>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    visible:"true",
                    visible2:"true",
                },
                
            });
            vm.$mount("#add");
        </script>
    </body>
</html>